<template>
	<common-page title="商户注册">
		<el-steps :active="stepActive" simple finish-status="success">
			<el-step title="基础信息"/>
			<el-step title="详细信息"/>
			<el-step title="完成注册"/>
		</el-steps>
		<el-form v-if="stepActive==0" ref="stepForm_0" :model="form" :rules="rules" :label-width="120">
			<el-form-item label="登录账号" prop="user_name">
				<el-input v-model="form.user_name" placeholder="请输入登录账号"></el-input>
				<div class="el-form-item-msg">登录账号将作为登录时的唯一凭证</div>
			</el-form-item>
			<el-form-item label="登录密码" prop="password">
				<el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码"></el-input>
				<sc-password-strength v-model="form.password"></sc-password-strength>
				<div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
			</el-form-item>
			<el-form-item label="确认密码" prop="password2">
				<el-input v-model="form.password2" type="password" show-password placeholder="请再一次输入登录密码"></el-input>
			</el-form-item>
			<el-form-item label="" prop="agree">
				<el-checkbox v-model="form.agree" label="">已阅读并同意</el-checkbox>
				<span class="link" @click="showAgree=true">《平台服务协议》</span>
			</el-form-item>
		</el-form>
		<el-form v-if="stepActive==1" ref="stepForm_1" :model="form" :rules="rules" :label-width="120">
			<el-form-item label="店铺名" prop="title">
				<el-input v-model="form.title" placeholder="请输入店铺名"></el-input>
			</el-form-item>
			<!--			<el-form-item label="邮箱" prop="email">-->
			<!--				<el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>-->
			<!--			</el-form-item>-->
			<el-form-item label="账号类型" prop="userType">
				<el-radio-group v-model="form.userType">
					<el-radio-button label="1">商户类型</el-radio-button>
					<!--					<el-radio-button label="2">企业开发者</el-radio-button>-->
				</el-radio-group>
			</el-form-item>
			<el-form-item label="开通类别" prop="open">
				<el-checkbox-group v-model="form.open">
					<el-checkbox label="1">小店</el-checkbox>
					<el-checkbox label="2">ERP</el-checkbox>
					<!--					<el-checkbox label="3">Javescript API</el-checkbox>-->
				</el-checkbox-group>
			</el-form-item>
		</el-form>
		<div v-if="stepActive==2">
			<el-result icon="success" title="注册成功" sub-title="可以使用登录账号以及手机号登录系统">
				<template #extra>
					<el-button type="primary" @click="goLogin">前去登录</el-button>
				</template>
			</el-result>
		</div>
		<el-form style="text-align: center;">
			<el-button v-if="stepActive>0 && stepActive<2" @click="pre">上一步</el-button>
			<el-button v-if="stepActive<1" type="primary" @click="next">下一步</el-button>
			<el-button v-if="stepActive==1" type="primary" @click="save">提交</el-button>
		</el-form>
		<el-dialog v-model="showAgree" title="平台服务协议" :width="800" destroy-on-close>
			平台服务协议
			<template #footer>
				<el-button @click="showAgree=false">取消</el-button>
				<el-button type="primary" @click="showAgree=false;form.agree=true;">我已阅读并同意</el-button>
			</template>
		</el-dialog>
	</common-page>
</template>

<script>
import scPasswordStrength from '@/components/scPasswordStrength';
import commonPage from './components/commonPage'
import {ElMessage} from "element-plus";
import commonMerchant from '@/api/apis/common/commonMerchant'

export default {
	components: {
		commonPage,
		scPasswordStrength
	},
	data() {
		return {
			stepActive: 0,
			showAgree: false,
			form: {
				user_name: "",
				password: "",
				password2: "",
				agree: true,
				title: "",
				email: "",
				userType: "1",
				open: ['1']
			},
			rules: {
				user_name: [
					{required: true, message: '请输入账号名'}
				],
				password: [
					{required: true, message: '请输入密码'}
				],
				password2: [
					{required: true, message: '请再次输入密码'},
					{
						validator: (rule, value, callback) => {
							if (value !== this.form.password) {
								callback(new Error('两次输入密码不一致'));
							} else {
								callback();
							}
						}
					}
				],
				agree: [
					{
						validator: (rule, value, callback) => {
							if (!value) {
								callback(new Error('请阅读并同意协议'));
							} else {
								callback();
							}
						}
					}
				],
				title: [
					{required: true, message: '请输入店铺名'}
				],
				// email: [
				// 	{ required: true, message: '请输入邮箱地址'}
				// ],
				userType: [
					{required: true, message: '请选择账户类型'}
				],
				open: [
					{required: true, message: '请选择开通类别'}
				]
			}
		}
	},
	mounted() {

	},
	methods: {
		pre() {
			this.stepActive -= 1
		},
		next() {
			const formName = `stepForm_${this.stepActive}`
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.stepActive += 1
				} else {
					return false
				}
			})
		},
		async save() {
			const formName = `stepForm_${this.stepActive}`
			await this.$refs[formName].validate((valid) => {
				if (valid) {
					//提交数据
					commonMerchant.save(this.form).then(res => {
						if (res.success) {
							this.stepActive += 1
						} else {
							this.$message.error(res.message)
						}
					})
				} else {
					return false
				}
			})
		},
		goLogin() {
			this.$router.push({
				path: '/login'
			})
		}
	}
}
</script>

<style scoped>


</style>
